<template>
  <div class="page">
    <div class="s-search p20">
      <el-form
        :model="alone.searchForm.data"
        status-icon
        ref="ruleForm"
        :inline="true"
        class="demo-ruleForm"
      >
        <el-form-item label="请选择上级平台">
          <el-cascader
            v-model="alone.searchForm.data.platformId"
            :props="orgCascaderCp.config.props"
            :options="orgSupAjax.data"
          >
          </el-cascader>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="rSubmitSearchForm">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="c-main p20">
      <div class="c-aside clearfix">
        <div class="c-head">
          <el-button
            @click="rNavToCreate"
            type="primary"
            plain
            class="fr btn"
            v-hasAuth:seestar_channelCreateH5doc
            >新增文案</el-button
          >
        </div>
      </div>
      <div class="c-section">
        <div class="c-body">
          <el-table
            :data="pageAjax.data"
            stripe
            style="width: 100%"
            row-key="id"
          >
            <el-table-column label="平台名称">
              <template slot-scope="scope">
                {{ scope.row.platformName }}
              </template>
            </el-table-column>
            <el-table-column label="图标">
              <template slot-scope="scope">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="scope.row.platformIcon"
                  fit="fill"
                ></el-image>
              </template>
            </el-table-column>
            <el-table-column label="招募标准">
              <template slot-scope="scope">
                {{ scope.row.recruitMark }}
              </template>
            </el-table-column>
            <el-table-column label="直播时长">
              <template slot-scope="scope">
                {{ scope.row.broadcastTime }}
              </template>
            </el-table-column>
            <el-table-column label="待遇">
              <template slot-scope="scope">
                {{ scope.row.treatment }}
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="rNavToDetail(scope.row.id)"
                  v-hasAuth:seestar_channelH5docDetail
                  >详情</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="rNavToEdit(scope.row.id)"
                  v-hasAuth:seestar_channelEditH5doc
                  >编辑</el-button
                >
                <el-button
                  type="text"
                  size="small"
                  @click="rDeleteH5doc(scope.row.id)"
                  v-hasAuth:seestar_channelDeleteH5doc
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="c-footer">
          <div class="c-pagination">
            <el-pagination
              layout="prev, pager, next"
              @current-change="rPagingChange"
              @prev-click="rPagingChange"
              @next-click="rPagingChange"
              :current-page="pageAjax.paging.current"
              :total="pageAjax.paging.total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getH5docList, deleteH5doc } from "@/api/channel.js";
// import { getOffspringnTree } from "@/assets/js/util.js";
import _ from "lodash";

export default {
  name: "seestar_channelH5docList",
  data: () => ({
    pageAjax: {
      btnDisabled: false,
      btnLoading: false,
      loading: false,
      lock: false,
      paging: {
        pages: 1, // 总页数
        current: 0, // 当前页
        total: 1, // 总数量
        pageSize: 10 // 每页数量
      },
      data: [],
      sumData: {}
    },
    orgSupAjax: {
      loading: false,
      data: [],
      orginData: []
    },
    alone: {
      searchForm: {
        data: {
          platformId: ""
        }
      }
    },
    orgCascaderCp: {
      config: {
        props: {
          value: "id",
          label: "name",
          checkStrictly: true,
          emitPath: false
        }
      }
    }
  }),
  created() {
    let _that = this;
    _that.getPageData();
    _that.getOrgData();
  },
  methods: {
    rSubmitSearchForm() {
      let _that = this;
      if (_that.pageAjax.loading) {
        return;
      }

      _that.pageAjax.lock = false;
      _that.pageAjax.paging.current = 0;
      _that.getPageData();
    },
    rPagingChange(e) {
      let _that = this;
      _that.pageAjax.paging.current = e - 1;
      _that.getPageData();
    },
    rDeleteH5doc(id) {
      let _that = this;
      this.$confirm("你确定要删除此数据?", "删除提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteH5doc({ id: id }).then(resp => {
            let respData = resp.data || {};

            if (respData.code === _that.STATUS.success[0]) {
              _that.$message.success(respData.msg || "删除成功");
              _that.pageAjax.paging.current =
                _that.pageAjax.paging.current > 0
                  ? _that.pageAjax.paging.current - 1
                  : 0;
              _that.getPageData();
            } else {
              _that.$message.error(respData.msg || "删除失败");
            }
          });
        })
        .catch(() => {});
    },
    getOrgData() {
      let _that = this;
      return _that.$store.dispatch("getPlatformList").then(() => {
        let arr =
          _.cloneDeep(
            _that.$store.getters.allPlatformListOffspringnTreeData(2)
          ) || [];

        _that.orgSupAjax.data = arr;
      });
    },
    getPageData() {
      let _that = this;
      let searchForm = _.cloneDeep(_that.alone.searchForm);
      let pageAjax = _that.pageAjax;

      if (pageAjax.loading || pageAjax.lock) {
        return;
      }

      let data = { ...searchForm.data };
      data.pageNo = _that.pageAjax.paging.current + 1;
      _that.pageAjax.loading = true;
      getH5docList({ params: data })
        .then(resp => {
          let respData = resp.data || {};
          if (respData.code === _that.STATUS.success[0]) {
            _that.pageAjax.data = respData.data.list;
            _that.pageAjax.paging = {
              pages: respData.data.pagination.pages,
              current: respData.data.pagination.current,
              total: respData.data.pagination.total,
              pageSize: respData.data.pagination.pageSize
            };
          } else {
            _that.$message.error(respData.msg || "获取失败");
          }
        })
        .finally(() => {
          _that.pageAjax.loading = false;
        });
    },
    rNavToCreate() {
      this.$router.push({ name: "seestar_channelCreateH5doc" });
    },
    rNavToEdit(id) {
      this.$router.push({
        name: "seestar_channelEditH5doc",
        query: {
          id: id
        }
      });
    },
    rNavToDetail(id) {
      this.$router.push({
        name: "seestar_channelH5docDetail",
        query: {
          id: id
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.page {
  .s-search {
    border-bottom: 1px solid #eee;
  }
  .c-aside {
    .btn {
      margin-right: 20px;
    }
    .diy-uploadBtn {
      margin-right: 20px;
    }
  }
  .c-main {
    margin-top: 20px;
  }
  .c-pagination {
    margin-top: 20px;
    text-align: center;
  }

  .f-qrcodeDrawerCp {
    overflow: hidden;
    position: absolute;
    width: 100%;
    left: 0;
    top: 50px;
    bottom: 0;
    .n-content {
      height: 100%;
      padding: 30px 0;
      overflow: auto;
      box-sizing: border-box;
    }
    .n-note {
      line-height: 2;
      color: #999;
    }
  }
}
</style>
